<template>
  <el-card>
    <Echart :options="barData" :height="280" />
  </el-card>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const barData = reactive<EChartsOption>(barOptions) as EChartsOption
const { t } = useI18n()
const setData = async () => {
  const data = props.data
  set(
    barData,
    'xAxis.data',
    data.map((v) => t(v.name))
  )
  set(barData, 'series', [
    {
      data: data.map((v) => v.dbCount),
      type: 'bar'
    },
    {
      data: data.map((v) => v.fileCount),
      type: 'bar'
    }
  ])
  barData.title!.text = ''
}
watchEffect(() => {
  setData()
})
</script>
